function Fang(ele){
    // console.log(ele)
    //获取当前盒子中操作对象
    this.leftbox=ele.querySelector(".leftbox")
    this.leftImg=this.leftbox.querySelector('img')
    this.mark=ele.querySelector('.mark')
    this.lis=ele.querySelectorAll('li')
    this.rightbox=ele.querySelector('.rightbox')
    this.rightImg=this.rightbox.querySelector('img')
    //调用入口函数（调用方法）
    this.fangda()
    this.qiehuan()
}
//在原型空间中创建一个放大的方法
Fang.prototype.fangda=function(){
     //给leftbox对象绑定三个鼠标事件
    this.leftbox.onmouseover=()=>{
        this.mark.style.display='block'
        this.rightbox.style.display='block'
    }
    this.leftbox.onmousemove=(e)=>{
        var e = e || window.event
        //获取当前鼠标的移动坐标
        var left1=e.pageX-this.leftbox.offsetLeft-parseInt(this.mark.offsetWidth/2)
        var top1=e.pageY-this.leftbox.offsetTop-parseInt(this.mark.offsetHeight/2)
        //获取最大移动距离
        var maxX=this.leftbox.offsetWidth-this.mark.offsetWidth
        var maxY=this.leftbox.offsetHeight-this.mark.offsetHeight
        var x,y
        //水平方向移动
        if(left1<=0){
            this.mark.style.left="0px"
            x=0
        }else if(left1>=maxX){
            this.mark.style.left=maxX+'px'
            x=maxX
        }else{
            this.mark.style.left=left1+'px'
            x=left1
        }

        //垂直方向移动
        if(top1<=0){
            this.mark.style.top='0px'
            y=0
        }else if(top1>=maxY){
            this.mark.style.top=maxY+'px'
            y=maxY
        }else{
            this.mark.style.top=top1+'px'
            y=top1
        }

        //让右边图片进行移动
        this.rightImg.style.left=-2*x+'px'
        this.rightImg.style.top=-2*y+'px'
    }

    this.leftbox.onmouseout=()=>{
        this.mark.style.display='none'
        this.rightbox.style.display='none'
    }
}
//切换图片
Fang.prototype.qiehuan=function(){
    var _this=this
    //遍历所有li对象
    for(let i=0;i<_this.lis.length;i++){
        //给每个li对象添加点击事件
        _this.lis[i].onclick=function(){
            //获取当前li对象中的img图片地址
            var imgUrl=this.querySelector('img').getAttribute('src')
            //把当前图片地址赋值给上面的图片
            _this.leftImg.setAttribute('src',imgUrl)
            _this.rightImg.setAttribute('src',imgUrl)
            //清空所有li标签中的class属性值
            for(let j=0;j< _this.lis.length;j++){
                _this.lis[j].className=''
            }
            //给指定的li标签添加class属性值
            _this.lis[i].className='border'
        }
    }
}